// *{
//   border: solid;
// }

@mixin wh($param) {
  width: $param;
  height: $param * 1.618;
}

body{
  min-height: 100vh;
  background: linear-gradient(120deg,#3498db,#8e44ad);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  form{
    box-sizing: border-box;
    @include wh(20rem);

    background-color: #f1f1f1;
    padding: 4em 2.5em;
    border-radius: 1em;

    h1{
      text-align: center;
      margin-bottom: 2em;
    }

    section{
      border-bottom: solid #adadad;
      margin: 2em 0;
      position: relative;
      background: none;
      input{
        font-size: 1em;
        color: #333;
        border: none;
        width: 100%;
        height: 3em;
        outline: none;
        background: none;
        padding: 0 .25em;
      }
      span{
        &::before
        {
          content: attr(data-placeholder);
          position: absolute;
          top: 50%;
          left: .25em; 
          color: #adadad;
          transform: translateY(-50%);
          z-index: -1;
          transition: .5s;
        }
        &::after
        {
          content: '';
          width: 0;
          height: 2px;
          position: absolute;
          background: linear-gradient(120deg,#3498db,#8e44ad);
          color: #adadad;
          transition: .5s;
        }
      }
      .focus + span{
        &::before
        {
          top: -5px;
          z-index: 0;
        }
        &::after
        {
          width: 100%;
        }
      }
    }

    #btn提交{
      display: block;
      width: 100%;
      height: 4em;
      border: none;
      outline: none;
      background-image: linear-gradient(120deg,#3498db,#8e44ad,#3498db);
      background-size: 200%;
      color: white;
      cursor: pointer;
      &:hover{
        transition: .5s;
        background-position: right;
      }    
      font-size: 1em;
      font-weight: bold;
    }

    footer{
      margin-top: 4em;
      text-align: center;
      font-size: 1em;
    }
  }
}
